<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input{
				width: 100px;
			}
			.hidden {
				display: none;
			}
		</style>
		<script src="../js/jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var images=[];
			$(function(){
				$.ajax(
					{
						url:"data.json",
						type:"get",
						dataType:"json",
						async:false,
						success:function(data){
							images=data;
							console.log(images)
						}
					}
				)
				display();
			})
			function display(){
				$("tbody").html("")
				for (let i = 0; i < images.length; i++) {
					let tr=$("<tr></tr>")
					let td1=newTD(images[i].id)
					let td2=newTD(images[i].name)
					let td3=newTD(images[i].dynasty)
					let td4=newTD(images[i].author)
					tr.append(td1)
					tr.append(td2)
					tr.append(td3)
					tr.append(td4)
					let td=$("<td></td>")
					let btn1=$('<button class="edit" onclick="edit()">编辑</button>')
					let btn2=$('<button class="del" onclick="del()">删除</button>')
					let btn3=$('<button class="save" onclick="save()">保存</button>')
					let btn4=$('<button class="cancel" onclick="cancel()">取消</button>')
					td.append(btn1)
					td.append(btn2)
					td.append(btn3)
					td.append(btn4)
					tr.append(td)
					$("tbody").append(tr)
				}
				$("input").attr("disabled","disabled")
				$(".save").addClass("hidden")
				$(".cancel").addClass("hidden")
				$(".add").removeClass("hidden")
				
			}
			function newTD(v){
				let td=$("<td></td>")
				let input=$("<input type='text'/>")
				input.attr("value",v)
				td.append(input)
				return td;
			}
			function add(){
				$(".add").addClass("hidden")
				let tr=$("<tr></tr>")
				let td1=newTD("")
				let td2=newTD("")
				let td3=newTD("")
				let td4=newTD("")
				tr.append(td1)
				tr.append(td2)
				tr.append(td3)
				tr.append(td4)
				let td=$("<td></td>")
				let btn3=$('<button class="save" onclick="save()">保存</button>')
				let btn4=$('<button class="cancel" onclick="cancel()">取消</button>')
				td.append(btn3)
				td.append(btn4)
				tr.append(td)
				$("tbody").append(tr)
			}
			function cancel(){
				if(confirm("是否取消？")){
					display()
				}
			}
			function save(){
				var index=$(".save").index(event.target)
				var t1=$("tbody>tr:eq("+index+") input").eq(0).val()
				var t2=$("tbody>tr:eq("+index+") input").eq(1).val()
				var t3=$("tbody>tr:eq("+index+") input").eq(2).val()
				var t4=$("tbody>tr:eq("+index+") input").eq(3).val()
				if(t1=="" || t2=="" || t3=="" || t4==""){
					alert("输入不完整")
					return false;
				}else if(confirm("是否保存？")){
					let image = {}
					image.id=t1
					image.name=t2
					image.dynasty=t3
					image.author=t4
					images[index]=image
					display();
				}
			}
			function edit(){
				$(".add").addClass("hidden")
				var index=$(".edit").index(event.target)
				$(".edit").eq(index).addClass("hidden")
				$(".del").eq(index).addClass("hidden")
				$(".save").eq(index).removeClass("hidden")
				$(".cancel").eq(index).removeClass("hidden")
				$("tbody>tr:eq("+index+") input").removeAttr("disabled")
			}
			function del(){
				if(confirm("是否要删除数据？")){
					var index=$(".del").index(event.target)
					images.splice(index,1)
					display()
				}
			}
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>朝代</th>
					<th>作者</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<tr style="text-align: center;">
					<td colspan="5" ><button class="add" onclick="add()">增加</button></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
